{extend name="common/main"}
{block name="css"}
<link type="text/css" rel="stylesheet" href="/static/baidumap/css/bdmapStyle.css">
<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
    #container{height:90%}
</style>
{/block}

{block name="body"}
<body data-type="widgets" onload="init();">
{include file="common/index"}
    <div id="controller" align="center">
        <input type="text"  placeholder="开始时间" data-am-datepicker  id="my-start-2"  style="margin-left: 15px"/>
        <input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>
        <input id="play" type="button" value="播放" onclick="play();" disabled />
        <input id="pause" type="button" value="暂停" onclick="pause();" disabled />
        <input id="reset" type="button" value="重置" onclick="reset()" disabled />
    </div>
    <div id="container"></div>
  <input type="hidden" class="imei" value="{$imei}">
</body>
{/block}

{block name="js"}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script><!--百度地图api-->
<script type="text/javascript" src="/static/baidumap/js/jquery.bdmap.js"></script><!--百度地图API模块化成函数供前台调用-->
<script>
//    //获取当前时间
//    var myDate = new Date;
//    var year = myDate.getFullYear(); //获取当前年
//    var mon = myDate.getMonth() + 1; //获取当前月
//    var date = myDate.getDate(); //获取当前日
//    $("#my-start-2").val(year + "-" + mon + "-" + date);
    //获取所有点的坐标
    var points = [];
    var address =[];
    $(function () {

        $imei=$('.imei').val();
        $time=$('#my-start-2').val();
        $.ajax({
            url: "{:url('Map/routef')}",
            type: 'POST',
            data: {
                imei :$imei,
                time:$time
            },
            dataType: 'json',
            traditional:true,//防止深度序列化
            cache:false,
            async:false,
            success: function (res) {
                if(res.data.data.length>0){
                    $.each(res.data.data, function($k,$v){
                        points.push(new BMap.Point($v.longitude,$v.latitude));
                        address.push($v.address)
                    });

                }else {
                    points.push(new BMap.Point(116.4037447556,39.9150707282));
                    layer.msg('查无轨迹', {shade: 0.5, time: 2000,icon: 2});
                    return false;
                }

            }
        })
        $("#my-start-2").change(function(){
//
            $imei=$('.imei').val();
            $time=$('#my-start-2').val();
            $.ajax({
                url: "{:url('Map/routef')}",
                type: 'POST',
                data: {
                    imei :$imei,
                    time:$time
                },
                dataType: 'json',
                traditional:true,//防止深度序列化
                cache:false,
                async:false,
                success: function (res) {
                    points=[];
                    $.each(res.data.data, function($k,$v){
                        points.push(new BMap.Point($v.longitude,$v.latitude));
                        address.push($v.address)
                    });
//                    console.log(points)
                    init()
                }
            })

        });
    })

    var map;   //百度地图对象
    var car ;   //汽车图标
    var label; //信息标签
    var centerPoint;

    var timer;     //定时器
    var index = 0; //记录播放到第几个point

    var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮

    function init() {
        followChk = document.getElementById("follow");
        playBtn = document.getElementById("play");
        pauseBtn = document.getElementById("pause");
        resetBtn = document.getElementById("reset");

        //初始化地图,选取第一个点为起始点
        map = new BMap.Map("container");
        map.centerAndZoom(points[0], 20);
        map.enableScrollWheelZoom();
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl({isOpen: true}));
        //通过DrivingRoute获取一条路线的point
//        var driving = new BMap.DrivingRoute(map);
//        driving.search(new BMap.Point(118.09610540428,24.623252065816), new BMap.Point(118.09650530328,24.623252085816));
//        driving.setSearchCompleteCallback(function() {
            var linePoints = [];
            var pointsLen = points.length;
            if(pointsLen == 0){
                return;
            }
            // 创建标注对象并添加到地图
            for(var i = 0;i <pointsLen;i++){
                linePoints.push(new BMap.Point(points[i].lng,points[i].lat));
            }
            //连接所有点
            map.addOverlay(new BMap.Polyline(linePoints, {strokeColor: "#00BFFF", strokeWeight: 5, strokeOpacity: 1}));
            //显示小车子
            label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
            car = new BMap.Marker(points[0]);
            car.setLabel(label);
            map.addOverlay(car);

            //点亮操作按钮
            playBtn.disabled = false;
            resetBtn.disabled = false;
//        });

    }

    function play() {
        playBtn.disabled = true;
        pauseBtn.disabled = false;
        var point = points[index];
        if(index > 0) {
            map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
        }
        label.setContent("地址：" + address[index]);
//        label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);
        car.setPosition(point);
        index++;
        if(followChk.checked) {
            map.panTo(point);
        }
        if(index < points.length) {
            timer = window.setTimeout("play(" + index + ")", 450);
        } else {
            playBtn.disabled = true;
            pauseBtn.disabled = true;
            map.panTo(point);
        }
    }

    function pause() {
        playBtn.disabled = false;
        pauseBtn.disabled = true;

        if(timer) {
            window.clearTimeout(timer);
        }
    }

    function reset() {
        followChk.checked = true;
        playBtn.disabled = false;
        pauseBtn.disabled = true;
        if(timer) {
            window.clearTimeout(timer);
        }
        index = 0;
        car.setPosition(points[0]);
        map.panTo(centerPoint);
        label.setContent("地址：" + address[0]);
    }
    function lujing() {
        $imei=$('.imei').val();
        $time=$('#my-start-2').val();
        $.ajax({
            url: "{:url('Map/routef')}",
            type: 'POST',
            data: {
                imei :$imei,
                time:$time
            },
            dataType: 'json',
            traditional:true,//防止深度序列化
            cache:false,
            async:false,
            success: function (res) {
                $.each(res.data.data, function($k,$v){
                    points.push(new BMap.Point($v.longitude,$v.latitude));
                    address.push($v.address)

                });
            }
        })
    }
</script>
{/block}